@forter/radio-button

fc-radio-button

Properties

Property	Attribute	Type	Default	Description
checked	checked	boolean	false	If the element is disabled
disabled	disabled	boolean	false	Whether the element is disabled
inputId		string
label	label	string	""	The element's label
labelId		string
name	name	string	""	The input's name
value	value	string	""	The input's value

Events

Event
item-selected

Slots

Name	Description
input	internally used to render light children. Do not use.
label	internally used to render light children. Do not use.

CSS Custom Properties

Property	Description
--fc-radio-border-color	default: var(--gray-8)
--fc-radio-checked-color	default: var(--ftr-cyan)
--fc-radio-disabled-border-color	default: rgba(0, 0, 0, 0.25)
--fc-radio-disabled-text-color	default: var(--gray-3)
--fc-radio-hover-color	default: var(--gray-0)
--fc-radio-text-color	default: black

fc-radio-group

##Usage

Default

<fc-radio-group>
     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Preselected

<fc-radio-group>
     <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Disabled

<fc-radio-group>
     <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Disable All

<fc-radio-group disabled>
     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Properties

Property	Attribute	Type	Default	Description
attributeForSelected		string	"checked"
legend	legend	string	""	The legend for the fieldset

Slots

Name	Description
	internally used for light input. Do not use.

CSS Custom Properties

Property	Description
--fc-radio-group-legend-color	default: var(--ftr-red)